<template>
  <el-row :gutter="25">
    <!-- 通道选择 -->
    <el-col :span="8">
      <div class="grid-content bg-purple-dark">
        <!-- 通道筛选 -->
        <el-radio-group v-model="radio.passagewayButton" size="">
          <el-radio-button
            :label="item"
            v-for="(item, index) in passageway.options"
            :key="index"
          >
          </el-radio-button>
        </el-radio-group>
        <!-- 通道选择 -->
        <div
          class="radio-item"
          v-for="(item, index) in passageway.list"
          :key="index"
        >
          <el-radio-group v-model="radio.passageway[index]" size="small">
            <el-radio-button
              :label="it"
              v-for="(it, ind) in item"
              :key="ind"
            ></el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </el-col>
    <!-- 元件选择 -->
    <el-col :span="8">
      <div class="grid-content bg-purple-dark">
        <el-radio-group v-model="radio.type" size="">
          <el-radio-button
            :label="item"
            v-for="(item, index) in passType.type"
            :key="index"
          >
          </el-radio-button>
        </el-radio-group>
        <div class="radio-item">
          <el-radio-group v-model="radio.passtype" size="small">
            <el-radio-button
              v-for="(item, index) in passType.list"
              :key="index"
              :label="item"
            ></el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </el-col>
    <!-- 打印模式 -->
    <el-col :span="8">
      <div class="grid-content bg-purple-darks">
        <el-radio-group size="">
          <el-radio-button label="打印模式选项"></el-radio-button>
        </el-radio-group>

        <div
          class="radio-item"
          v-for="(item, index) in printer.checkboxes"
          :key="index"
        >
          <el-radio-group v-model="radio.passtype" size="small">
            <el-checkbox size="small" :label="item.label"></el-checkbox>
          </el-radio-group>
        </div>
      </div>
    </el-col>
  </el-row>

  <el-row :gutter="25">
    <el-col :span="6">
      <div class="grid-content bg-purple-dark">
        <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
          >页眉：</span
        >
        <el-input-number style="width: 50%"></el-input-number>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple-dark">
        <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
          >时间缩放比例：</span
        >
        <el-input-number style="width: 50%"></el-input-number>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple-dark">
        <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
          >页数限制：</span
        >
        <el-input-number style="width: 50%"></el-input-number>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple-dark">
        <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
          >页边距：</span
        >
        <el-input-number style="width: 50%"></el-input-number>
      </div>
    </el-col>
  </el-row>

  <el-row :gutter="25">
    <el-col :span="6">
      <div class="grid-content bg-purple-dark">
        <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
          >页脚：</span
        >
        <el-input-number style="width: 50%"></el-input-number>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple-dark">
        <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
          >时间轴标注间隔：</span
        >
        <el-input-number style="width: 50%"></el-input-number>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple-dark">
        <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
          >幅值刻度：</span
        >
        <el-input-number style="width: 40%"></el-input-number>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple-dark">
        <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
          >粗线：</span
        >
        <el-input-number style="width: 40%"></el-input-number>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="25">
    <el-col :span="6">
      <div class="grid-content bg-purple-dark">
        <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
          >上：</span
        >
        <el-input-number style="width: 50%"></el-input-number>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple-dark">
        <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
          >下：</span
        >
        <el-input-number style="width: 50%"></el-input-number>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple-dark">
        <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
          >左：</span
        >
        <el-input-number style="width: 50%"></el-input-number>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple-dark">
        <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
          >右：</span
        >
        <el-input-number style="width: 50%"></el-input-number>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="25">
    <el-col :span="2" :offset="16">
      <div class="grid-content bg-purple-dark">
        <el-button type="primary" @click="$emit('saved')">保存</el-button>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content bg-purple-dark"><el-button>载入</el-button></div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content bg-purple-dark">
        <el-button type="info">预览</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";

const radio = ref({
  passagewayButton: 0, // 通道
  passageway: [], //通道选择

  type: 0, // 原件选择
  passtype: 0, // 原件通道
  printer: [], // 打印模式
});

// 通道筛选设置
const passageway = ref({
  options: ["待选通道", "已选通道", "清空已选"],
  list: [
    ["条目1", "条目2", "条目3"],
    ["条目1", "条目2", "条目3"],
    ["条目1", "条目2", "条目3"],
  ],
});

// 通道类型选择
const passType = ref({
  type: ["按原件选择", "自由选择通道"],
  list: ["条目1", "条目2", "条目3"],
});

// 打印选项
const printer = ref({
  checkboxes: [
    { label: "彩色" },
    { label: "横向用纸" },
    { label: "仅在打印选择时段中的波形" },
    { label: "压缩在指定页数内" },
    { label: "与显示一致的时间轴缩放比例" },
    { label: "绘制T0时刻标线" },
    { label: "绘制当前时刻标线" },
    { label: "绘制通道峰值" },
    { label: "仅首页绘制通道名" },
    { label: "与显示一致的模拟量通道共轴打印" },
    { label: "自动适应通道高度" },
    { label: "单独设定各通道的幅值比" },
    { label: "自动优化波形幅值方向比例尺" },
    { label: "仅打印有变位的开关量" },
    { label: "打印可见标签" },
    { label: "打印通道编号" },
  ],
});

</script>

<style scoped>
.radio-item {
  /* display: inline-block; */
  margin-top: 10px;
}
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  /* background: #99a9bf; */
  text-align: center;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
